<script setup>
import { ref, onMounted, reactive } from 'vue';
import { default as http, getImageUrl } from '@/utils/request.js';
import { useRouter } from 'vue-router'; //路由器
import { showToast } from 'vant';


const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
//跳转到商品
const toGoodsView = function (id) {
  console.log("商品ID:", id);
  router.push({ path: "/navbar/" + id + "?name=yujianlong" });
}

// router.push({path: "/orderinfo/" + orderNumber +"?name=zhangsan"});
//跳转到商品

// const toGoodsView = function(goodsId){
//   console.log("商品ID:",goodsId);
//   router.push({path:"/goods/" + goodsId + "?name=yujianlong"});

//跳转到商品分类页面
function toGoodsTypeView() {
  router.push("/goodstype");

}
//插入历史记录
const history = reactive({
  userId: '',
  goodsId: '',
  goodsName: '',
  production: '',
  price: '',
  image: '',
})
const HistoryView = function (goodsId, goodsName, details, price, picture) {
  history.goodsId = goodsId,
    history.goodsName = goodsName,
    history.production = details,
    history.price = price,
    history.image = picture,
    http.post('/user/history', history).then((res) => {
      console.log("插入信息：", res.data);
    });
}


//跳转到搜索页面
function toSearchView() {
  router.push("/search");
}
//加载状态
const loading = ref(false); //加载状态
const finished = ref(false); //是否到底
//搜索栏
//import GoodsView from '@/components/views/GoodsView.vue'  
const search = ref('')
// const goodsLists = ref([])  

// onMounted(() => {
//     setTimeout(() => {
//         getData();
//     }, 500);

//轮播图
const imgs = [
  'https://n.sinaimg.cn/sinakd10113/600/w1920h1080/20220901/a4dc-8bd9c3ba4d97ba9c9c167fe530ea77d4.jpg',
  'https://www.chyixun56.com/zb_users/upload/printer/20230514/646022011ad63.jpg',
  'https://img2.baidu.com/it/u=3883644885,2769739363&fm=253&fmt=auto&app=120&f=JPEG?w=607&h=336'
];
const active = ref();
//商品列表
const goodsLists = reactive([

])
//获取商品列表
const getGoodsList = function () {
  http.get(
    '/user/goods/list'
  ).then((res) => {
    console.log('获取到的商品列表：', res.data);
    goodsLists.splice(0);//todo 需要将原有的元素清空
    res.data.data.list.forEach(goods => {
      goodsLists.push(goods);
    });
    console.log('获取到的商品列表ss：', goodsLists);
  }).catch(err => {
    console.log(err);
  });
  loading.value = true;
  finished.value = true;
  loading.value = false;
}

onMounted(() => {
  getGoodsList();
  // 获取个人信息  
  http.get("/user/info").then((response) => {
    console.log("获取个人信息= ", response);
  }).catch(() => {
  });
})
</script>
<template>
  <div>
    <nut-navbar :left-show="false" @click-back="back" @click-title="title" @click-icon="icon" @click-right="rightClick"
      title="好旧淘" :titleIcon="true" desc="好物" fixed="false">
      <template #title-icon>
        <Cart2 width="16px" />
      </template>
      <template #right>
        <MoreX class="right" width="16px" />
      </template>
    </nut-navbar>
  </div>
  <div>
    <form action="/">
      <div>
        <van-search @focus="toSearchView" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" @click="" />
      </div>
    </form>

  </div>
  <div>
    <van-notice-bar left-icon="volume-o" text="卖旧换新，就上好旧淘，包您满意！" />

  </div>
  <div>
    <van-swipe :autoplay="3000" lazy-render @click="toGoodsView">
      <van-swipe-item v-for="img in imgs">
        <img :src="img" :width="400" :height="220" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div>
    <van-grid>
      <van-grid-item
        icon="https://i-1-lanrentuku.52tup.com/2020/12/20/0243fb61-f7bb-4bf4-94e7-65d1688bbced.png?imageView2/2/w/1024/"
        text="手机" @click="toGoodsTypeView" />
      <van-grid-item icon="https://img0.baidu.com/it/u=2957751801,1928294167&fm=253&fmt=auto&app=138&f=JPEG?w=651&h=500"
        text="相机" @click="toGoodsTypeView" />
      <van-grid-item icon="https://img2.baidu.com/it/u=59347081,2933316362&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"
        text="潮牌" @click="toGoodsTypeView" />
      <van-grid-item icon="https://bpic.51yuansu.com/pic2/cover/00/32/66/5810feca103b0_610.jpg" text="家用"
        @click="toGoodsTypeView" />
    </van-grid>
  </div>

  <van-row>
    <van-list v-model:loading="loading" :finished="finished" finished-text="我是有底线的......" @load="getGoodsList">
      <van-row>
        <van-col style="margin-bottom: 10px;" span="12" v-for="gl in goodsLists " @click="toGoodsView(gl.goodsId)">
          <van-col style="border: 2px solid color(#708090);">
            <van-card :price="gl.price" :title="gl.goodsName" :desc="gl.quality" :thumb="getImageUrl(gl.picture)"
              @click="HistoryView(gl.goodsId, gl.goodsName, gl.details, gl.price, gl.picture)" />
          </van-col>

        </van-col>
      </van-row>
    </van-list>
  </van-row>
</template>
<style scoped>
.child {
  width: 80px;
  height: 80px;
  background: #f2f5f5;
  border-radius: 4px;
}

.goods-card {
  margin: 0;
  background-color: #f2f5f5;
}

.delete-button {
  height: 100%;
}
</style>


  